<template>
    <div class="wetcland-gm-info">
        <template>
            <v-container fluid>
                <v-data-iterator no-data-text="无数据" :items="items" :items-per-page.sync="itemsPerPage" :page="page"
                                 :search="search"
                                 :sort-by="sortBy.toLowerCase()" :sort-desc="sortDesc" hide-default-footer>
                    <template v-slot:header>
                        <v-toolbar dark color="blue darken-3" class="mb-1">
                            <v-text-field v-model="search" clearable flat solo-inverted hide-details
                                          prepend-inner-icon="mdi-magnify" label="搜索"></v-text-field>
                            <template v-if="$vuetify.breakpoint.mdAndUp">
                                <v-spacer></v-spacer>
                                <v-select v-model="sortBy" flat solo-inverted hide-details :items="sortKey"
                                          prepend-inner-icon="mdi-magnify" label="排序方式"></v-select>
                                <v-spacer></v-spacer>
                                <v-btn-toggle v-model="sortDesc" mandatory>
                                    <v-btn large depressed color="blue" :value="false">
                                        <v-icon>mdi-arrow-up</v-icon>
                                    </v-btn>
                                    <v-btn large depressed color="blue" :value="true">
                                        <v-icon>mdi-arrow-down</v-icon>
                                    </v-btn>
                                </v-btn-toggle>
                            </template>
                        </v-toolbar>
                    </template>

                    <template v-slot:default="props">
                        <v-row>
                            <v-col v-for="item in props.items" :key="item.id" cols="12" sm="6" md="4" lg="3">
                                <v-card @click="cardClick(item.id)">
                                    <v-card-title class="subheading font-weight-bold">
                                        {{ item.title }}
                                    </v-card-title>

                                    <v-divider></v-divider>

                                    <v-list dense>
                                        <v-list-item v-for="(key, index) in filteredKeys" :key="index">
                                            <v-list-item-content :class="{ 'blue--text': sortBy === key }">
                                                {{ transforms[index] }}:
                                            </v-list-item-content>
                                            <v-list-item-content class="align-end"
                                                                 :class="{ 'blue--text': sortBy === key }">
                                                {{ item[key] }}
                                            </v-list-item-content>
                                        </v-list-item>
                                    </v-list>
                                </v-card>
                            </v-col>
                        </v-row>
                    </template>

                    <template v-slot:footer>
                        <v-row class="mt-2" align="center" justify="center">
                            <span class="grey--text">每页数量</span>
                            <v-menu offset-y>
                                <template v-slot:activator="{ on, attrs }">
                                    <v-btn dark text color="primary" class="ml-2" v-bind="attrs" v-on="on">
                                        {{ itemsPerPage }}
                                        <v-icon>mdi-chevron-down</v-icon>
                                    </v-btn>
                                </template>
                                <v-list>
                                    <v-list-item v-for="(number, index) in itemsPerPageArray" :key="index"
                                                 @click="updateItemsPerPage(number)">
                                        <v-list-item-title>{{ number }}</v-list-item-title>
                                    </v-list-item>
                                </v-list>
                            </v-menu>

                            <v-spacer></v-spacer>

                            <span class="mr-4 grey--text">{{ page }} / {{ numberOfPages }}</span>
                            <v-btn fab dark color="blue darken-3" class="mr-1" @click="formerPage">
                                <v-icon>mdi-chevron-left</v-icon>
                            </v-btn>
                            <v-btn fab dark color="blue darken-3" class="ml-1" @click="nextPage">
                                <v-icon>mdi-chevron-right</v-icon>
                            </v-btn>
                        </v-row>
                    </template>
                </v-data-iterator>
            </v-container>
        </template>
    </div>
</template>

<script>
    import Ajax from '../../Ajax'
    export default {
        name: "WetclandGMInfo",
        data() {
            return {
                itemsPerPageArray: [4, 8, 12],
                search: '',
                filter: {},
                sortDesc: false,
                page: 1,
                itemsPerPage: 12,
                sortBy: '售价',
                transforms: [
                    '玩家名',
                    '物品名称',
                    '发布日期',
                    '下架日期',
                    '售价',
                    '是否已下架'
                ],
                keys: [
                    'playerName',
                    'itemName',
                    'date',
                    'endDate',
                    'price',
                    'isOutDate'
                ],
                items: [],
                sortKey: [
                    'price',
                    'date',
                    'endDate',
                    'isOutDate'
                ],
            }
        },
        computed: {
            numberOfPages() {
                return Math.ceil(this.items.length / this.itemsPerPage)
            },
            filteredKeys() {
                return this.keys.filter(key => key !== 'Name')
            },
        },
        mounted() {
            this.getAllGMItem()
        },
        methods: {
            nextPage() {
                if (this.page + 1 <= this.numberOfPages) this.page += 1
            },
            formerPage() {
                if (this.page - 1 >= 1) this.page -= 1
            },
            updateItemsPerPage(number) {
                this.itemsPerPage = number
            },
            getAllGMItem() {
                Ajax.post('globalMarket/getAllGlobalMarketRecord').then(res => {
                    if (res.data.code == 200) {
                        console.log(res)
                        res.data.list.map(v => {
                            let startTime = new Date(v.startTime)
                            let endTime = new Date(v.endTime)
                            v.playerName = v.ownerName
                            v.date = startTime.toLocaleString()
                            v.endDate = endTime.toLocaleString()
                            v.isOutDate = new Date() > endTime ? '已下架' : '未下架'
                            this.items.push(v)
                        })
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>
